<template>
  <div class="home">
    <van-nav-bar title="首页" :right-text="rightText" @click-right="onClickRight" />
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <van-image width="100%" height="100%" fit="cover" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <div v-for="insure in insureList" :key="insure.insureTypeId">
      <div class="title" style="margin:12px 16px;font-size:16px">{{ insure.insureTypeName }}</div>
      <div v-for="(item, index) in insure.frontInsureInfos" :key="item.insureInfoId" style="background-color: #fff;">
        <van-row style="padding:16px; ">
          <van-col span="8">
            <van-image width="100px" height="100px" fit="cover" :src="index === 0 ? waterway : highway" />
          </van-col>
          <van-col span="16">
            <div><span style="font-weight:bold; font-size:16px">{{ item.insureName }}</span><span
                style="font-size:12px;margin-left:5px">{{
      '费率:' + item.rate + '起' }}</span>
            </div>
            <!-- <div style="margin:5px 0; height:44px">
              <van-tag color="#ffe1e1" text-color="#ad0000" style="margin-right:4px; margin-bottom:4px" plain
                v-for="tag in skillTag" :key="tag">{{ tag }}</van-tag>
            </div> -->
            <van-row type="flex" justify="space-between">
              <!-- <van-col span="12" style="line-height:32px"><span style="margin-right:2px; font-size:12px;">已有</span><span
                  style="font-size:16px;color:#ff7b35;margin-right:2px;">{{ arr[index] }}</span><span
                  style=" font-size:12px;">人投保</span></van-col> -->
              <van-col span="12"><van-button style="float:right; margin-top:25px" size="small" type="info"
                  @click="insureClick(item.insureInfoId, item.insureName)">立即投保</van-button></van-col>
            </van-row>
          </van-col>
        </van-row>
        <div class="van-hairline--bottom"></div>
      </div>
      <!-- <div class="title" style="margin:12px 16px;font-size:16px">仓储险</div>
      <div v-for="item in list6" :key="item.name" style="background-color: #fff;">
        <van-row style="padding:16px; ">
          <van-col span="8">
            <van-image width="100px" height="100px" fit="cover" :src="item.img" />
          </van-col>
          <van-col span="16">
            <div><span style="font-weight:bold; font-size:16px">{{ item.name }}</span><span
                style="font-size:12px;margin-left:5px">{{
                  item.title }}</span>
            </div>
            <div style="margin:5px 0; height:44px">
              <van-tag color="#ffe1e1" text-color="#ad0000" style="margin-right:4px; margin-bottom:4px" plain
                v-for="tag in item.skillTag" :key="tag">{{ tag }}</van-tag>
            </div>
            <van-row type="flex" justify="space-between">
              <van-col span="12" style="line-height:32px"><span style="margin-right:2px; font-size:12px;">已有</span><span
                  style="font-size:16px;color:#ff7b35;margin-right:2px;">111</span><span
                  style=" font-size:12px;">人投保</span></van-col>
              <van-col span="12"><van-button style="float:right" size="small" type="info">立即投保</van-button></van-col>
            </van-row>
          </van-col>
        </van-row>
        <div class="van-hairline--bottom"></div>
      </div> -->
    </div>
    <div style="margin-top:30px; height: 30px; width:100%;"></div>
  </div>
</template>

<script>
import bannerImg1 from '../../images/banner/banner1.jpg'
import bannerImg2 from '../../images/banner/banner2.jpg'
import bannerImg3 from '../../images/banner/banner3.jpg'
import bannerImg4 from '../../images/banner/banner4.jpg'
import highway from '../../images/banner/highway.jpg'
import waterway from '../../images/banner/waterway.webp'
export default {
  name: 'home',
  computed: {
    rightText() {
      return localStorage.getItem('token') ? '' : '登录'
    }
  },
  data() {
    return {
      skillTag: ['火灾', '爆炸', '台风等自然灾害', '雨淋', '盗抢'],
      arr: [],
      highway,
      waterway,
      images: [
        bannerImg1,
        bannerImg2,
        bannerImg3,
        bannerImg4
      ],
      insureList: []
    };
  },
  methods: {
    onClickRight() {
      this.$router.push('/login')
    },
    clickButton() {
      //
    },
    insureClick(insureInfoId, insureName) {
      this.$router.push({
        path: '/temp1',
        query: {
          insureInfoId,
          templateName: insureName
        }
      })
    },
    getInsureList() {
      this.$get('/index/getIndex').then(res => {
        if (res && res.code * 1 === 200) {
          this.insureList = res.data
          this.insureList.forEach(item => {
            item.frontInsureInfos.forEach(a => {
              a.randomNumber = 109
            })
          })
        } else {
          this.insureList = []
        }
      })
    }
  },
  mounted() {
    this.getInsureList()
  },
  
}
</script>
<style scoped>
.home {
  background-color: #f5f5f5;
  font-size: 1rem;
}

/* .title {
  margin: 5px 16px;
} */
</style>